<template>
	<div class="cantainerAll">
		<div class='cantainer'>
			<div class='heard-box'>
				<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_zg.png' />
			</div>
			<div class='flex flex-item-center marquee'>
				<div class='flex flex-item-v-center marquee-box'>
					<div class='maqueen-shadown'></div>
					<!-- <maqueen>  -->
					<div class='flex flex-item-v-center marquee-show'>
						<div class='flex flex-item-v-center marquee-item' v-for='user in users'>
							<img v-bind:src="user.wxHeadImg" />
							<div class='marquee-text'>
								{{user.wxName}}成功邀请了<span class='marquee-number'>{{user.ableInviteCount}}位用户</span>
							</div>
						</div>
					</div>
					<!-- </maqueen>  -->
				</div>
			</div>
			<div class='flex flex-item-between invate-box' v-if="activeInfos[0]">
				<div class='invate-item' @click="showNoQualifiedFir">
					<img :src="activeInfos[0].img" style="width: 2.1rem;height: 2.1rem;" v-bind:class="ableInviteCount>2?'':'filter'"/>
				</div>
				<div class='invate-item' @click="showNoQualifiedSec">
					<img :src="activeInfos[1].img" style="width: 2.1rem;height: 2.1rem;" v-bind:class="ableInviteCount>4?'':'filter'"/>
				</div>
				<div class='invate-item' @click="showNoQualifiedThi">
					<img :src="activeInfos[2].img" style="width: 2.1rem;height: 2.1rem;" v-bind:class="ableInviteCount>9?'':'filter'"/>
				</div>
			</div>
			<div class='progress-box'>
			    <div class='progress-item'>
			      <div class="progressUp" v-bind:style='{width:(ableInviteCount>10?10:ableInviteCount)+"0%"}'></div>
			    </div>
			    <div class='progress-bar'>
			      <div class='progress-img' v-bind:class="{'active' : ableInviteCount>0}" v-bind:style='{left:(ableInviteCount>10?10:ableInviteCount)+"0%"}'>{{ableInviteCount}}</div>
			    </div>
			    <div class='flex flex-item-between progress-text'>
			      <span class='flex-1 colornor' v-bind:class="{'active' : ableInviteCount>2}">邀请3位</span>
			      <span class='flex-1 colornor' v-bind:class="{'active' : ableInviteCount>4}">邀请5位</span>
			      <span class='flex-1 colornor' v-bind:class="{'active' : ableInviteCount>9}">邀请10位</span>
			    </div>
			</div>
		</div>
		<linetitle><span class="title" slot='title'>我的邀请</span></linetitle>
		<div class='invite-box'>
			<div @click="modalLimit" class='flex flex-item-l-end invite-titlle'>
				<span class="limit">什么是马上花额度？</span>
			</div>




			<div class='flex invite-list'>
				<div v-if="inviteUsers[0]">
					<div v-for='item in inviteUsers' class='flex flex-v flex-item-v-center flex-item-between scroll-item'>
			              <div class='user-item flex-1'>
			                <img :src='item.wxHeadImg||"https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/Placehodler/img_placeholder_84_84@2x.png"' />
			                <div class='user'>
			                  <span>{{item.wxName||''}}</span>
			                  <span class='ecs'>{{item.accountName}}</span>
			                </div>
			              </div>
			              <span v-bind:class="[status(item)]">{{item.creditStatus}}</span>

			        </div>
				</div>
				<div v-else class='flex flex-c flex-item-center no-invite'>
					<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/no-invite.png' />
					<span>您暂未邀请好友或好友未获取额度</span>
				</div>
			</div>
		</div>
		<div class='flex flex-item-center invite-material'>
			<linetitle><span class="title titleW" slot='title'>邀请人福利</span></linetitle>
		</div>
		<div class="invite-table-contain">
			<div class='invite-table'>
				<div class='flex flex-c flex-item-center table-h'>
					<span class='title'>邀请好友人数</span>
					<span>(达成后即可1元选购)</span>
				</div>
				<div class='table-tr invite-heard'>
					<div class='table-td'>人数</div>
					<div class='flex-1 table-td'>商品</div>
					<div class='table-td'>市场价</div>
				</div>

				<div class='table-tr' v-for="item in activeInfos">
					<div class='table-td'>
						<span>{{item.limitCount}}位</span>
					</div>
					<div class='flex-1 table-td'>
						<span class='ecs' v-for='good in item.goods'>{{good.name}}</span>
					</div>
					<div class='table-td ecs'>
						<span class='ecs' v-for='good in item.goods'>￥{{good.price}}</span>
					</div>
				</div>
			</div>
		</div>
		<linetitle><span class="title" slot='title'>新人好礼</span></linetitle>
		<div class='flex new-box'>
			<div class='new-item'>
				<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_zp.png' />
				<div class='new-info'>
					<span class='title'>新人礼包</span>
					<span class='info'>300元优惠券</span>
				</div>
			</div>
			
			<div class='new-item'>
				<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_mx.png' />
				<div class='new-info'>
					<span class='title'>三期免息</span>
					<span class='info'>先享后付</span>
				</div>
			</div>
		</div>
		<linetitle><span class="title" slot='title'>活动规则</span></linetitle>
		<div class='qa-box'>
			<div class='q-box'>Q：如何参加邀请活动？</div>
			<div class='q-box answer'>
				<span class='q-box'>A：</span>点击立即邀请，分享本活动给好友。
			</div>
			<div class='q-box'>Q：怎样算邀请成功？</div>
			<div class='qa-more' v-show="!moreshow">
				<div class='q-box answer'>
					<span class='q-box'>A：</span>好友通过您分享的链接，注册花伴商城并获得马上花额度后，即可算作邀请成功。同一微信账号、同一手机号、同一终端设备号、同一支付账号均视为同一用户。
				</div>
				<div class='q-box'>Q：邀请人如何领取奖励？</div>
				<div class='q-box answer'>
					<span class='q-box'>A：</span>当您邀请的好友通过审核后，达到了3位、5位、10位，您即可获得1元购买相应商品的机会。购买完成后，当前邀请的总进度将全部清零，不再累计。您可以再次发起邀请好友获取新的机会。
				</div>
				<div class='q-box'>Q：我的好友有何奖励？</div>
				<div class='q-box answer'>
					<span class='q-box'>A：</span>注册花伴商城即送300元花伴商城优惠券；全场购物享三期免息。
				</div>
			</div>
			<div class='more-box'>
				<div bindtap='isShowMore' class='flex flex-c flex-item-center more-btn'>

					<div class='more-icon' v-show="!moreshow"  @click="hideMore">
						<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/more_up.png' />
					</div>

					<span v-show="moreshow" class='more'>...</span>
					<div class='more-icon' v-show="moreshow" @click="showMore">
						<span>点击展开</span>
						<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/more_down.png' />
					</div>
				</div>
			</div>
		</div>
		<div class='flex flex-item-end invite-line-box'>
			<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite-line.png' />
		</div>
		<div class='flex flex-item-center flex-c declare-box'>
			<span>此活动最终解释权归花伴商城所有。</span>
			<span>如发现通过不正当手段获取奖励，经查实，花伴商城有权撤销其活动资格并取消奖励，情节严重者将追究其法律责任。</span>
		</div>
		<button class='flex flex-item-center nav-bar' @click="inviteFri">
		  <div class='flex flex-item-center nav-item'>
		    <span class='nav-text'>立即邀请</span>
		  </div>
		</button>
		<div class='modal' v-show="modal" @click="closeModal">

			<div v-if="noQualified" class='show-msg'  @click="closeModal">
				<div class='flex flex-item-center close-modal'>
					<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_close.png' />
				</div>
				<div class='flex flex-c flex-item-center modal-content'>
					<span>您还未获得1元购资格</span>
					<span>快去邀请您的好友协助您吧！</span>
				</div>
			</div>
			<div v-else class='show-msg msg-content'>
				<div class='flex flex-item-center close-modal' @click="closeModal">
					<img src='https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/invite_close.png' />
				</div>
				<div class='modal-content modal-2-content'>
					<div class='title-box'>什么是马上花？</div>
					<div class='msg-box one'>
						马上花指众安保险与指定资金方合作的一款互联网金融服务产品，马上花消费额度是众安保险基于用户信用为用户提供的消费承保额度。用户在花伴商城上可通过分期付款的方式以马上花消费额度购买商品或服务，形成花伴商城平台商户对用户享有的应收账款债权，众安保险为上述应收账款债权提供信用保险保障。
					</div>
					<div class='msg-box two'>
						已获取额度是指您的好友通过众安马上花的评测体系的评测，成功获得了分期额度，可用于花伴商城分期购买商品。
					</div>
					<div class='msg-box three'>
						获取额度失败是指您的好友未能通过众安马上花评测体系的评测，不过您的好友仍可以通过微信支付全额购买花伴商城商品。
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Linetitle from '@/components/huabanShop/lineTitle'
	require('@/assets/less/main.less');
	import Api from '@/util/api'
	import util from '@/util/util'
	export default {
		data() {
			return {
				token: '',
				moreshow: true,
				ableInviteCount: 0,
				ableableInviteCount: 0,
				activeInfos: [],
				inviteUsers: [],
				phone: '',
				wxHeadImg: '',
				wxName: '',
				ent: '',
				users: [],
				modal: false,
				noQualified : false,
			}
		},
		components: {
			Linetitle
		},
		created: function () {
			this.token = util.getUserToken();
			if(!this.token ){
			    util.login();
			    return;
			}
			window.loginCallBack = (token) => {
				this.token = token;
			}
			this.init();
		},
		methods: {
			init () {
			    const res = this.post(Api.mgmQueryInviteInfo, {}, {token:this.token});
			    res.then( data => {
			    	if (data.code == '200') {
				    	let res = data.data;
				    	console.log(res)
				    	this.ableInviteCount = res.ableInviteCount;
						this.activeInfos = res.activeInfos;
						this.inviteUsers = res.inviteUsers;
						this.phone = res.phone;
						this.wxHeadImg = res.wxHeadImg;
						this.wxName = res.wxName;
						this.ent = res.ent;
			    	} else {
			    		console.log(222)
			    		this.$vux.loading.hide()
			    		this.$vux.toast.text(data.msg, 'middle')
			    	}

			    })
				const res1 = this.post(Api.mgmQueryLatestInviteInfo, {}, {token:this.token});
				res1.then( data => {
					if (data.code == '200') {
						let res = data.data;
						this.users = res;
					} else{
						this.$vux.loading.hide()
						this.$vux.toast.text(data.msg, 'middle')
					}

				})
			},
			status (item) {
				if (item.creditStatus=="已获取额度"){
					if (item.used) {
						 return 'used';
					}
				     
				  } else if (item.creditStatus == "获取额度失败"){
				    return "fail";
				  }
			},
			showMore() {

				this.moreshow = false;
			},
			hideMore () {
				this.moreshow = true;
			},
			modalLimit () {
				this.modal = true;
				this.noQualified = false;
			},
			closeModal () {
				this.modal = false;
				this.noQualified = false;
			},
			showNoQualifiedFir () {
				if (this.ableInviteCount > 2) {
					this.$router.push({ path: '/mgm/inviteGoods?token='+this.token })
				} else{
					this.modal = true;
					this.noQualified = true;
				}
			},
			showNoQualifiedSec () {
				if (this.ableInviteCount >4) {
					this.$router.push({ path: '/mgm/inviteGoods?token=' +this.token})
				} else{
					this.modal = true;
					this.noQualified = true;
				}
			},
			showNoQualifiedThi () {
				if (this.ableInviteCount >9) {
					this.$router.push({ path: '/mgm/inviteGoods?token=' +this.token})
				} else{
					this.modal = true;
					this.noQualified = true;
				}
			},
			inviteFri () {
				let title = '送你300元礼包，快来领取吧！进入小程序领取礼包。';
				let descr = '6565';
				let url1 = 'https://www.123.com';
				let image1 = 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/share_bg.png';
				let pagePath = encodeURIComponent('pages/invite/meInvite/meInvite?source=share&phone='+this.phone+'&ent='+this.ent);
				let userName = 'gh_951c6b3e8370'
				let str = 'huaban://socialShare?type=3&title='+title+'&descr='+descr+'&url='+url1+'&image='+image1+'&pagePath='+pagePath+'&userName='+userName
				window.location = str;
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less" scoped="scoped">
	@import '../../assets/less/main.less';
	
	@keyframes move {
		0% {
			margin-left: 0;
		}
		100% {
			margin-left: -44.04rem;
		}
	}

	@-webkit-keyframes move {
		0% {
			margin-left: 0;
		}
		100% {
			margin-left: -44.04rem;
		}
	}
	.table-tr .table-td:last-child{
		display: flex;
	}
	.show{
		display: block;
	}
	.colornor{
		color: #596ae1;
	}
	.used{
		color: #fbcd00;
	}
	.fail{
		color: #e45a60;
	}
	.progressUp{
		background: #fbcd00;
		height: 0.21rem;
    	border-radius: 0.1rem
	}
	.cantainerAll {
		background: #4937a6;
	}

	.limit {
		color: #fbcd00;
	}

	.titleW {
		width: 1.66rem;
	}

	.flex-1 {
		text-align: center;
	}

	.cantainer {
		display: block;
		background: #4937a6;
	}

	.invite-table-contain {
		background: #4937a6;
	}

	page {
		background-color: #4937a6;
	}

	.heard-box {
		height: 7.74rem;
		overflow: hidden;
	}

	.heard-box img {
		width: 100%;
		height: 100%;
	}

	.nav-bar {
		height: 1.4rem;
		background-color: #523ebb;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		border: none;
	}

	.nav-item {
		background-color: #fbcd00;
		width: 6.9rem;
		height: 0.9rem;
		border-radius: 0.06rem;
	}

	.nav-text {
		font-weight: bold;
		color: #523ebb;
		font-size: 0.32rem;
	}

	.marquee {
		height: 1rem;
		position: relative;
		z-index: 999;
	}

	.marquee-box {
		width: 6.3rem;
		height: 1rem;
		padding: 0 0.43rem;
		background-color: #4d54a6;
		border-radius: 0.06rem;
		top: -50%;
		overflow: hidden;
		left: 0.15rem;
		position: absolute;
	}

	.maqueen-shadown {
		box-shadow: -1.2rem 0 0.3rem rgba(0, 0, 0, 0.2) inset;
		height: 1rem;
		border-radius: 0.06rem;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.invate-box {
		height: 2.80rem;
		/* background-color: red; */
	}

	.invite-box {
		padding: 0 0.3rem;
		background: #4937a6;
	}

	.invite-titlle {
		height: 0.48rem;
	}

	.invite-titlle text {
		font-family: PingFangSC-Regular;
		color: #fbcd00;
		font-size: 0.24rem;
	}

	.invite-list {
		height: 6.68rem;
		width: 6.2rem;
		border: 0.03rem solid #fbcd00;
		border-radius: 0.08rem;
		padding: 0.3rem 0.3rem;
		overflow-x: scroll;
	}

	.scroll-item {
		height: 1.2rem;
		width: 5.9rem;
	}

	.user-item {
		overflow: hidden;
		flex: 1;
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.user-item img {
		width: 0.8rem;
		height: 0.8rem;
		float: left;
		border-radius: 100%;
	}

	.scroll-item>span {
		font-family: PingFangSC-Regular;
		color: #fbcd00;
		font-size: 0.3rem;
	}

	.user>span {
		font-family: PingFangSC-Regular;
		color: #fff;
		line-height: 0.4rem;
		font-size: 0.3rem;
	}

	.user-item .user {
		padding-left: 0.18rem;
	}

	.scroll-item span.fail {
		color: #ed5c5c;
	}

	.scroll-item span.used {
		color: #596ae1;
	}

	.invite-material {
		height: 1.6rem;
		padding-top: 0.01rem;
		background: #4937a6;
	}

	.invite-material .title-line {
		width: 3.45rem;
	}

	.invite-material span {
		width: 1.6rem;
	}

	.marquee-item {
		height: 0.66rem;
		padding: 0 0.1rem;
		min-width: 3.8rem;
	}

	.marquee-show {
		white-space: nowrap;
		flex-wrap: nowrap;
		min-width: 6.3rem;
		height: 1rem;
		animation: move linear 50s infinite;
		-webkit-animation: move linear 50s infinite;
	}

	.show-itm {
		background-color: red;
		display: inline-block;
	}

	.show-itm:last-child {
		background-color: saddlebrown;
	}

	.show-itm:first-child {
		background-color: blueviolet;
	}

	.marquee-text {
		font-family: PingFangSC-Regular;
		color: #fff;
		font-size: 0.24rem;
		display: inline-block;
		margin-left: 0.12rem;
	}

	.marquee-number {
		color: #fbcd00;
		margin: 0;
		padding: 0;
	}

	.marquee-item img {
		width: 0.66rem;
		height: 0.66rem;
		float: left;
		border-radius: 100%;
	}

	.marquee-item:last-child {
		margin: 0;
	}

	.invate-box {
		height: 2.1rem;
		padding: 0 0 0 0.6rem;
		margin-top: -0.28rem;
	}

	.invate-item {
		height: 2.1rem;
		width: 2.1rem;
		overflow: hidden;
	}

	.invate-item img {
		height: 2.1rem;
		width: 2.1rem;
	}

	.progress-box {
		padding: 0.1rem 0.45rem;
	}

	.progress-item {
		/*width: 6.6rem;*/
		height: 0.21rem;
		border-radius: 0.1rem;
		background-color: #3e2b70;
	}

	.progress-item view {
		height: 100%;
		width: 50%;
		border-radius: 0.1rem;
		background-color: #fbcd00;
	}

	.progress-text {
		height: 0.7rem;
		line-height: 0.7rem;
	}

	.progress-text text {
		text-align: center;
		font-family: PingFangSC-Regular;
		color: #596ae1;
		font-size: 0.28rem;
		font-weight: 200;
	}

	.progress-text text.active {
		color: #fbcd00;
	}
	.active {
		color: #fbcd00;
	}
	.progress-bar {
		height: 0.6rem;
		position: relative;
	}

	.progress-img.active {
		color: #4937a6;
		background-image: url('https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/progress-bar-ac.png');
	}

	.progress-img {
		height: 0.47rem;
		width: 0.41rem;
		background-image: url('https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/progress-bar.png');
		background-size: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-0.2rem);
		top: 0.08rem;
		text-align: center;
		line-height: 0.52rem;
		color: #5254c7;
		font-family: PingFangSC-Regular;
		font-size: 0.28rem;
	}

	.table-h {
		height: 1.1rem;
		background-color: #fbcd00;
	}

	.invite-table {
		margin: 0 0.3rem;
		border: 0.03rem solid #fbcd00;
		border-top: none;
		border-radius: 0.03rem;
		overflow: hidden;
	}

	.table-h span {
		color: #4937a6;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		line-height: 0.26rem;
	}

	.table-h span.title {
		font-size: 0.32rem;
		line-height: 0.34rem;
	}

	.table-tr {
		border-bottom: 0.02rem solid #fbcd00;
		overflow: hidden;
		display: flex;
		text-align: center;
		display: -webkit-flex;
		color: #fbcd00;
		font-family: PingFangSC-Regular;
		font-size: 0.28rem;
		min-height: 0.8rem;
	}

	.invite-table .table-tr:last-child {
		border-bottom: none;
	}

	.table-td span {
		height: 0.6rem;
		line-height: 0.6rem;
		word-wrap: break-word;
	}

	.table-td {
		border-right: 0.02rem solid #fbcd00;
		border-left: 0.02rem solid #fbcd00;
		min-height: 0.8rem;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.table-tr .table-td:first-child {
		width: 1.1rem;
		border: none;
	}

	.table-tr .table-td:last-child {
		border: none;
		width: 1.3rem;
	}

	.invite-heard {
		font-size: 0.3rem;
		font-weight: 600;
	}

	.new-box {
		padding: 0 0.3rem;
		background: #4937a6;
	}

	.new-item {
		height: 2.7rem;
		display: flex;
		display: -webkit-flex;
		flex: 1;
		align-items: center;
		flex-direction: column;
		width: 1.6rem;
	}

	.new-item img {
		width: 1.6rem;
		height: 1.6rem;
	}

	.new-info {
		margin-top: 0.18rem;
		flex-direction: column;
		display: flex;
		line-height: 0.36rem;
		display: -webkit-flex;
		align-items: center;
	}

	.new-info .title {
		color: #fbcd00;
		font-size: 0.28rem;
	}

	.new-info .info {
		color: #fff;
		font-size: 0.22rem;
	}

	.qa-box {
		min-height: 3.4rem;
		padding: 0 0.3rem;
	}

	.q-box {
		color: #fbcd00;
		font-size: 0.28rem;
		font-weight: bold;
		line-height: 0.4rem;
		margin-top: 0.3rem;
	}

	.q-box:first {
		margin: 0;
	}

	.q-box.answer {
		font-weight: lighter;
		margin: 0;
	}


	.more-box {
		margin-top: 0.3rem;
	}

	.more-btn {
		width: 3rem;
		margin: 0 auto;
	}

	.more {
		padding-right: 0.25rem;
		font-size: 0.3rem;
		font-family: "PingFang SC";
		color: rgb(21, 29, 91);
		height: 0.5rem;
		text-align: center;
	}

	.more-icon img {
		width: 0.25rem;
		height: 0.15rem;
		margin-left: 0.04rem;
	}

	.more-icon span {
		font-size: 0.24rem;
		font-family: "PingFang SC";
		color: rgb(19, 28, 88);
		text-align: center;
	}

	.declare-box {
		height: 2.4rem;
		padding: 0 0.3rem 1.4rem;
	}

	.declare-box span {
		font-size: 0.24rem;
		font-family: "PingFang SC";
		color: rgb(251, 205, 0);
		text-align: center;
		line-height: 0.36rem;
	}

	.invite-line-box {
		padding: 0 0.3rem;
		height: 0.8rem;
	}

	.invite-line-box img {
		height: 0.03rem;
		width: 100%;
	}

	.no-invite {
		width: 5.9rem;
		height: 100%;
	}

	.no-invite img {
		width: 1.74rem;
		height: 1.86rem;
	}

	.no-invite span {
		font-size: 0.32rem;
		font-family: "PingFang SC";
		color: rgb(89, 106, 225);
		line-height: 0.4rem;
		margin-top: 0.5rem;
	}

	.maqueen-end {
		width: 1rem;
		height: 1rem;
		background-color: red;
	}

	.modal {
		position: fixed;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.6);
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	.modal .show-msg {
		border-radius: 0.08rem;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		left: 50%;
		top: 40%;
	}

	.show-msg {
		width: 5.6rem;
		height: 3rem;
		position: absolute;
		background-color: #fff;
	}

	.close-modal {
		width: 0.64rem;
		height: 0.64rem;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: -0.22rem;
		right: -0.22rem;
	}

	.close-modal img {
		width: 0.3rem;
		height: 0.3rem;
	}

	.modal-content {
		height: 100%;
	}

	.modal-content text {
		font-size: 0.28rem;
		font-family: "PingFang SC";
		color: rgb(73, 55, 166);
		text-align: center;
		display: block;
		line-height: 0.4rem;
	}

	.msg-content {
		width: 6.3rem;
		height: 7.4rem;
	}

	.modal-2-content {
		padding: 0.3rem 0.5rem;
	}

	.title-box {
		height: 0.8rem;
		line-height: 0.8rem;
		text-align: center;
		font-size: 0.24rem;
		font-family: "PingFang SC";
		color: rgb(73, 55, 166);
		font-weight: bold;
	}

	.msg-box {
		padding-left: 0.4rem;
		font-size: 0.24rem;
		font-family: "PingFang SC";
		color: rgb(73, 55, 166);
		font-weight: 100;
		position: relative;
		margin-top: 0.5rem;
	}

	.msg-box.one {
		margin-top: 0.1rem;
	}

	.msg-box.one::before {
		content: "1";
	}

	.msg-box.two::before {
		content: "2";
	}

	.msg-box.three::before {
		content: "3";
	}

	.msg-box::before {
		position: absolute;
		left: 0;
		color: #fff;
		border-radius: 50%;
		top: 0.04rem;
		text-align: center;
		line-height: 0.24rem;
		background-color: rgb(73, 55, 166);
		height: 0.24rem;
		width: 0.24rem;
		font-size: 0.2rem;
	}
</style>
